<template>
	<view class="container">
		<view class="workbench-title">餐厅管理工作台</view>
		<view class="grid-layout">
			<view class="grid-item" v-for="(item, index) in routerList" :key="index" @click="navigateTo(item.url)">
				<image :src="item.img" mode="aspectFit"></image>
				<text>{{ item.name }}</text>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';

	// 定义路由列表
	const routerList = ref([{
			name: "菜品管理",
			img: '/static/admin/icon-orders.svg', // 这里可以替换成实际的图片地址
			url: '/subpackage/foodManage/index'
		},
		{
			name: "活动管理",
			img: '/static/admin/icon-orders.svg', // 这里可以替换成实际的图片地址
			url: '/subpackage/activityManage/index'
		},
		{
			name: "店铺管理",
			img: '/static/admin/icon-system.svg', // 这里可以替换成实际的图片地址
			url: '/subpackage/storeManage/index'
		},
		{
			name: "订单管理",
			img: '/static/admin/icon-production-sd.svg', // 这里可以替换成实际的图片地址
			url: '/subpackage/orderManage/index'
		},
		{
			name: "菜单管理",
			img: '/static/admin/icon-skill.svg', // 这里可以替换成实际的图片地址
			url: '/subpackage/menuManage/index'
		},
		{
			name: "反馈管理",
			img: '/static/admin/icon-system-messages.svg', // 这里可以替换成实际的图片地址
			url: '/subpackage/feedbackManage/index'
		},
		{
			name: "数据展示",
			img: '/static/admin/icon-system-messages.svg', // 这里可以替换成实际的图片地址
			url: '/subpackage/merchantManage/index'
		}
	]);

	// 导航到指定页面的方法
	const navigateTo = (url) => {
		uni.navigateTo({
			url: url
		});
	};
</script>

<style scoped>
	.container {
		padding: 20px;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.workbench-title {
		font-size: 24px;
		font-weight: bold;
		margin-bottom: 20px;
	}

	.grid-layout {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 5vw;
	}

	.grid-item {
		margin-bottom: 20px;
		padding: 20px;
		background-color: #fff;
		border-radius: 10px;
		box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
		display: flex;
		flex-direction: column;
		align-items: center;
		text-align: center;
		cursor: pointer;
	}

	.grid-item image {
		width: 80px;
		height: 80px;
		margin-bottom: 10px;
	}

	.grid-item text {
		font-size: 16px;
		color: #333;
	}
</style>